<template>
  <div class="city-medical-container">
    <split-pane
      :min-percent="12"
      :max-percent="50"
      :default-percent="12"
      split="vertical"
      v-if="menuList.length"
    >
      <template slot="paneL">
        <div class="city-medical-aside">
          <!-- 左侧菜单树 -->
          <aside-menu
            :list="menuList"
            @select-menu="selectedMenu"
            :active="active"
          />
        </div>
      </template>
      <template slot="paneR">
        <div class="city-medical-main">
          <!-- 右侧内容菜单树 -->
          <!-- <el-card> -->
          <router-view></router-view>
          <!-- </el-card> -->
        </div>
      </template>
    </split-pane>
    <div v-else class="city-medical-main">
      <!-- <el-card> -->
      <router-view></router-view>
      <!-- </el-card> -->
    </div>
  </div>
</template>

<script>
import aside from '@c/aside'
import splitPane from 'vue-splitpane'

export default {
  components: {
    'aside-menu': aside,
    'split-pane': splitPane,
  },
  data() {
    return {
      // menuList: [
      //   {
      //     icon_name: '指标体系',
      //     id: '/indicator-manage/main',
      //     index_name: '指标体系',
      //     index_type: 'taskPublish',
      //     is_single: true,
      //   },
      // ],
      menuList: [],
      active: 'main',
    }
  },
  methods: {
    selectedMenu(menu) {
      console.log('menu :>> ', menu)
      this.$router.push(menu.id)
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.city-medical-container {
  height: 100%;
  width: 100%;
  position: relative;
  // padding: 20px;
  // display: flex;
  .city-medical-aside {
    width: 100%;
    height: 100%;
  }
  .city-medical-main {
    width: calc(100%);
    height: 100%;
  }
}
.time-line {
  position: absolute;
  bottom: 10px;
  display: flex;
  background: red;
  width: 60%;
  left: 400px;
}
</style>
